<!--  -->
<template>
  <div class="group-box">
    <div class="goods_box" v-for="(item, index) in list" :key="index">
      <div class="goods_img">
        <!-- <img :src="item.has_one_goods.thumb" /> -->
        <van-image
          width="6.5625rem"
          height="6.5625rem"
          radius="0.5rem"
          :src="item.has_one_goods.thumb"
        />
      </div>
      <ul class="goods_info flex">
        <li class="name" style="-webkit-box-orient: vertical;">
          {{ item.title }}
        </li>
        <li class="price">
          <span>{{ $i18n.t('money') }}</span
          >{{ item.has_many_option_levels[0].group_price }}&nbsp;<span
            >{{ $i18n.t('money') }}{{ item.has_many_option_levels[0].has_one_fight_groups_option.option_price }}</span
          >
        </li>
        <li class="number">
          <div class="btn" @click="goGroup(item.id)">
            <div class="group-btn flex-j-sb " >
              <div class="btn-left">
                {{item.has_many_option_levels[0].member_num}}人团
              </div>
              <div class="btn-right" >去开团</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import yzBlank from 'components/ui_components/yz_blank';
import { Image as VanImage } from "vant";
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    store_id: {
      type: [String, Number]
    }
  },
  data() {
    return {};
  },

  //   activated: {},

  components: { 
    VanImage
   },
  computed: {},

  methods: {
    goGroup(id) {
      this.$router.push(this.fun.getUrl('GroupGoods', { id: id, store_id: this.store_id }));
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.group-box {
  margin:0.625rem 0.75rem 0 0.75rem;
  .goods_box {
    display: flex;
    margin:0 0 0.625rem 0;
    background-color: #fff;
    padding:0.75rem;
    border-radius: 0.75rem;
    .goods_img {
      width: 6.5625rem;
      height: 6.5625rem;
      background: #f2f2f2;
      overflow: hidden;
      border-radius: 0.25rem;
      margin-right: 0.625rem;

      img {
        width: 100%;
        display: block;
      }
    }

    .goods_info {
      width: 14.0625rem;
      text-align: left;
      flex-direction: column;
      justify-content: space-around;
      .name {
        font-weight: 500;
        font-size: 0.875rem;
        line-height: 1.125rem;
        color: #00001C;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .price {
        font-size: 1rem;
        color: #f15353;
        padding:0.625rem 0 0.75rem 0;
        font-weight: bold;
        span {
          font-size: 0.875rem;
        }

        span:last-child {
          color: #8c8c8c;
          margin-left: 0.625rem;
          font-weight: 500;
          font-size: 0.8125rem;
        }
      }

      .number {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;

          .iconfont {
            font-size: 1.5rem;
            color: #f15353;
            margin-right: 0.375rem;
          }

          span {
            color: #f15353;
            font-size: 0.875rem;
            border-left: solid 1px #ebebeb;
            padding-left: 6px;
          }
        }
        .number-left {
          background: rgba(241,83,83,0.1);
          border-radius: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
          .group-icon {
            font-weight: bold;
            font-size: 0.75rem;
            color: #FFFFFF;
            padding:0.25rem 0.4375rem 0.25rem 0.3125rem;
            background: #F15353;
            border-radius: 0.3125rem 0.625rem 0.625rem 0.3125rem;
            display: inline-block;
          }
          .num {
            font-size: 0.75rem;
            line-height: 0.75rem;
            color: #F15353;
            display: inline-block;
            padding:0.25rem 0.375rem 0.25rem 0.25rem;
            
          }
        }

        .go_group {
          font-weight: 500;
          font-size: 0.875rem;
          line-height: 0.875rem;
          color: #FFFFFF;
          background: var(--themeBaseColor);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 1rem;
          padding:0.5625rem 0.9375rem 0.5625rem 0.8125rem;
          span {
            color: #fff;
            font-size: 0.875rem;
          }

          .fa {
            color: #fff;
            font-size: 1rem;
            margin-left: 0.625rem;
          }
        }
      }
    }
  }
  .btn {
    overflow: hidden;
  }
  .btn  .btn-left {
    width:50%;
    box-sizing: border-box;
    color:#fff;
    background: rgba(241,83,83,0.1);
    border-radius: 0.875rem 0rem 0rem 0.875rem;
    padding:0.4375rem 1.5rem 0.4375rem 0.8125rem;
    position: relative;
    z-index:1;
    font-size: 0.875rem;
    line-height: 0.875rem;
    color: #F15353;
    white-space: nowrap;
  }
  .btn  .btn-left .good-price {
    position: relative;
    z-index: 2;
  }
  .btn .group-btn {
    overflow: hidden; //避免某些机型出现多1px的高度
  }
  .btn .group-btn .btn-right {
  width:50%;
  
  font-size: 0.875rem;
  font-weight: 500;
  background: #F15353;
  text-align: center;
  border-radius: 0.5rem;
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
  line-height: 0.875rem;
  color: #FFFFFF;  
  white-space: nowrap;
  padding:0.4375rem 0.875rem 0.4375rem 0.1875rem;
  border-radius: 0 0.875rem 0.875rem 0rem;
}
 .btn .group-btn .btn-right::before {
  content:"";
  height: 100%;
  box-sizing: border-box;
  position:absolute;
  background: #F15353;
  top:0;
  left:-0.375rem;
  bottom: 0;
  width: 1.25rem;
  border-radius: 0rem 0  0 0rem;
  -webkit-transform: skew(-15deg);
  -moz-transform: skew(-15deg);
  -ms-transform: skew(-15deg);
  transform: skew(-15deg);
  z-index: -1;
}
}
</style>
